<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>loading...</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="./maptalks/maptalks.css">
    <link rel="stylesheet" href="./zTreeStyle/zTreeStyle.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        #bmap {
            position: absolute;
            top: 0;
            left: 400px;
            bottom: 0;
            right: 0;
        }
        
        #controller {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 400px;
            border-right: 1px solid #A4D4F5;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        #controller .controller-inner {
            width: 100%;
            height: 100%;
            background: #ffffff;
            position: relative;
            overflow-x: hidden;
        }
        
        .ztree-list-wrap {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 45px;
            bottom: 40px;
            overflow-y: auto;
        }
        
        .el-zoom-in-bottom-enter-active,
        .el-zoom-in-bottom-leave-active {
            opacity: 1;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
        }
        
        .el-zoom-in-bottom-enter,
        .el-zoom-in-bottom-leave-active {
            opacity: 0;
            -webkit-transform: scaleY(0);
            transform: scaleY(0)
        }
        
        .el-zoom-in-top-enter-active,
        .el-zoom-in-top-leave-active {
            transition: transform .3s cubic-bezier(.23, 1, .32, 1) .1s, opacity .3s cubic-bezier(.23, 1, .32, 1) .1s
        }
        
        .el-zoom-in-top-enter-active,
        .el-zoom-in-top-leave-active {
            opacity: 1;
            -ms-transform: scaleY(1);
            transform: scaleY(1);
            -ms-transform-origin: center top;
            transform-origin: center top
        }
        
        .el-zoom-in-top-enter,
        .el-zoom-in-top-leave-active {
            opacity: 0;
            -ms-transform: scaleY(0);
            transform: scaleY(0)
        }
        
        #container .area-ctrl {
            position: absolute;
            width: 400px;
            top: 10px;
            left: 410px;
            border: 1px solid #A4D4F5;
            background-color: #ffffff;
            border-radius: 5px;
        }
        
        .search-box {
            width: 100px;
            height: 41px;
        }
        
        .tree-box {
            position: absolute;
            right: 0px;
            left: 0px;
            bottom: 0px;
            top: 82px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        #container .ivu-btn .ivu-icon,
        #container .ivu-input-wrapper .ivu-icon {
            margin-top: 0px;
        }
        
        #container .ivu-select-arrow {
            margin-top: -7px important;
        }
        
        .selectTreeClass {
            background: #DEE1E6;
        }
        
        div.selected-map-wrap {
            height: 46px;
            width: 46px;
            background-color: #fff;
            cursor: pointer;
            padding: 5px;
            border-radius: 7px;
        }
        
        div.selected-map-wrap div.map-icon {
            width: 36px;
            height: 36px;
        }
        
        div.selected-map-wrap div.map-icon>img {
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        div.selected-map-inner {
            height: 36px;
            width: 36px;
            position: relative;
            overflow: hidden;
        }
        
        div.selected-map-list {
            position: absolute;
            top: 46px;
            left: 0px;
            right: 0px;
            background-color: #fff;
            z-index: 99;
            border-radius: 7px;
            overflow: hidden;
        }
        
        div.selected-map-list>div {
            padding: 5px;
        }
        
        div.selected-map-list>div:hover {
            background-color: #FCF0C0;
        }
        
        div.selected-map-list>div.actived {
            background-color: #FCF0C0;
        }
        
        div.map-selector-popup {
            position: absolute;
            right: 46px;
            width: 155px;
            height: 60px;
            padding: 5px 0px 5px 5px;
            box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            background-color: #fff;
        }
        
        .MapSelector_item_193IR {
            height: 50px;
            width: 50px;
            float: left;
            border: 1px solid;
            cursor: pointer;
            position: relative;
            margin-right: 5px;
        }
        
        .satellite-map {
            background: url(./images/model-satel.png) no-repeat;
            background-position: 50%;
        }
        
        .normal-map {
            background: url(./images/model-map.png) no-repeat;
            background-position: 50%;
        }
        
        .map_icon_traffic_off {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_traffic_on {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_xiansu_off {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_icon_xiansu_on {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_selector_icon_text {
            position: absolute;
            bottom: 1px;
            left: 1px;
            right: 1px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
        }
        
        .no_selected_icon {
            background-color: rgba(255, 255, 255, 0.7);
        }
        
        .selected_icon {
            background-color: rgba(64, 150, 209, 0.9);
            color: rgb(255, 255, 255);
        }
        
        div.maptalks-attribution {
            display: none;
        }
        
        .map-mark {
            position: absolute;
            right: 0px;
            top: 100px;
        }
        
        .map-mark .map-mark-close {
            height: 50px;
            width: 20px;
            padding: 5px 0px;
            background-color: #34598A;
            border-radius: 10px 0px 0px 10px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .map-mark .map-mark-close>div {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #ffffff;
        }
        
        .map-mark .map-mark-wrapper {
            width: 230px;
        }
        
        .map-mark .map-mark-header {
            height: 40px;
            position: relative;
        }
        
        .map-mark .map-mark-header .close-btn {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 20px;
            border-radius: 10px 0px 0px 0px;
            background-color: #34598A;
            cursor: pointer;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
        }
        
        .map-mark-header-content {
            position: absolute;
            left: 20px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background-color: #7F8FA7;
            line-height: 40px;
            font-size: 14px;
            color: #000000;
            padding-left: 10px;
        }
        
        .map-mark-header-content>div {
            position: absolute;
            height: 0px;
            width: 0px;
            border-top: 6px solid transparent;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #ffffff;
            position: absolute;
            bottom: 0px;
            left: 20px;
        }
        
        .map-mark .map-mark-content {
            background-color: #ffffff;
            width: 100%;
            height: 300px;
            border-left: 1px solid #e3e3e3;
            border-right: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3;
            position: relative;
            padding-top: 10px;
        }
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="container" v-cloak>
        <div id="controller">
            <div class="controller-inner">
                <div style="height:41px">
                    <Row>
                        <i-col :span="6" style="text-align:center;">
                            <i-button style="width:80px;" @click="drawPoint" icon="md-add">{{isZh?"点":"Point"}}</i-button>
                        </i-col>
                        <i-col :span="6" style="text-align:center;">
                            <i-button style="width:80px;" @click="drawCircular" icon="md-add">{{isZh?"圆":"Circle"}}</i-button>
                        </i-col>
                        <i-col :span="6" style="text-align:center;">
                            <i-button style="width:80px;" @click="drawPolygon" icon="md-add">{{isZh?"多边形":"Polygon"}}</i-button>
                        </i-col>
                        <i-col :span="6" style="text-align:center;">
                            <i-button style="width:80px;" icon="md-add" @click="openClassModal">{{isZh?"分类":"Classify"}}</i-button>
                        </i-col>
                    </Row>
                </div>
                <div class="search-box" style="width:100%">
                    <Row style="width:100%">
                        <i-col :span="24">
                            <i-input style="width:100%;" v-model="searchValue" suffix="ios-search" :placeholder="isZh?'搜索':'Search'"></i-input>
                        </i-col>
                    </Row>
                </div>
                <div class="tree-box">
                    <Tree :data="treeData" show-checkbox @on-check-change="onCheckChange"></Tree>
                </div>
            </div>
        </div>
        <div id="bmap"></div>
        <div style="position: absolute; right:10px;top:10px;">
            <div>
                <selected-map @select-map="onSelectMap" @switch-traffic="onSwitchTraffic"></selected-map>
            </div>
        </div>

        <map-track @on-map-track="onQueryTrack"></map-track>

        <transition name="el-zoom-in-top">
            <div class="area-ctrl" v-show="isCircular">
                <Row v-if="isZh">
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>{{isEdit?'编辑':'添加'}}圆 - 半径:{{radius}}米</h3>
                    </i-col>
                </Row>
                <Row v-else>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>{{isEdit?'Edit':'Add'}}Circle - radius:{{radius}}m</h3>
                    </i-col>
                </Row>
            </div>
        </transition>

        <transition name="el-zoom-in-top">
            <div v-if="isZh" class="area-ctrl" v-show="isPoint">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>添加点</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 把鼠标移到 地图上单击绘制，或者输入经纬度添加
                    </i-col>
                </Row>
                <Row style="padding:10px 0px;">
                    <i-col :span="2" offset="2" style="line-height: 32px;">
                        经度
                    </i-col>
                    <i-col :span="6">
                        <i-input v-model="wgs84Lon"></i-input>
                    </i-col>
                    <i-col :span="2" offset="2" style="line-height: 32px;">
                        纬度
                    </i-col>
                    <i-col :span="6">
                        <i-input v-model="wgs84Lat"></i-input>
                    </i-col>
                </Row>
                <Row style="padding:10px 0px;">
                    <i-col :span="8" offset="2">
                        <i-button type="error" style="width: 100%;" @click="onClickCheck">查看</i-button>
                    </i-col>
                    <i-col :span="8" offset="2">
                        <i-button type="primary" style="width: 100%;" @click="onClickAddPoint">添加</i-button>
                    </i-col>
                </Row>
            </div>
            <div v-else class="area-ctrl" v-show="isPoint">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>Add Point</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 Move the mouse over the map and click draw, or enter latitude and longitude to add
                    </i-col>
                </Row>
                <Row style="padding:10px 0px;">
                    <i-col :span="2" offset="2" style="line-height: 32px;">
                        Lon
                    </i-col>
                    <i-col :span="6">
                        <i-input v-model="wgs84Lon"></i-input>
                    </i-col>
                    <i-col :span="2" offset="2" style="line-height: 32px;">
                        Lat
                    </i-col>
                    <i-col :span="6">
                        <i-input v-model="wgs84Lat"></i-input>
                    </i-col>
                </Row>
                <Row style="padding:10px 0px;">
                    <i-col :span="8" offset="2">
                        <i-button type="error" style="width: 100%;" @click="onClickCheck">Check</i-button>
                    </i-col>
                    <i-col :span="8" offset="2">
                        <i-button type="primary" style="width: 100%;" @click="onClickAddPoint">Add</i-button>
                    </i-col>
                </Row>
            </div>
        </transition>

        <transition name="el-zoom-in-top">
            <div v-if="isZh" class="area-ctrl" v-show="isPolygon">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>添加多边形</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 把鼠标移到 地图上单击开始绘制，双击结束绘制
                    </i-col>
                </Row>
            </div>
            <div v-else class="area-ctrl" v-show="isPolygon">
                <Row>
                    <i-col :span="24" style="padding:10px;text-align:center;">
                        <h3>Add Polygon</h3>
                    </i-col>
                </Row>
                <Row>
                    <i-col :span="22" offset="2" style="padding:10px 0 10px 0;">
                        1 、 Move the mouse to the map, click to start drawing, double-click to end drawing
                    </i-col>
                </Row>
            </div>
        </transition>

        <Modal v-model="addClassModal" width="400">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                <span v-if="isEditClass">{{isZh?'编辑分类':'Edit Classify'}}</span>
                <span v-else>{{isZh?'添加分类':'Add Classify'}}</span>
            </p>
            <Row style="padding: 10px">
                <i-col :span="6" style="text-align:center;line-height:32px;">
                    {{isZh ? '类型名称' : 'Classify Name'}}:
                </i-col>
                <i-col :span="16">
                    <i-input v-model.trim="typeName"></i-input>
                </i-col>
            </Row>
            <div slot="footer" style="text-align:center;">
                <i-button style="width:80%;" @click="handleAddType">{{isZh ? '确定' : 'confirm'}}</i-button>
            </div>
        </Modal>

        <Modal v-model="addPolygonModal" width="400" :mask-closable="false">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                <span v-if="isEdit">{{isZh?'编辑标注':'Edit Classify'}}</span>
                <span v-else>{{isZh?'添加标注':'Add Classify'}}</span>
            </p>
            <Row style="padding: 10px">
                <i-col :span="6" style="text-align:center;line-height:32px;">
                    {{isZh ? '标注名称' : 'Fence Name'}}:
                </i-col>
                <i-col :span="16">
                    <i-input v-model.trim="geoName"></i-input>
                </i-col>
            </Row>
            <Row style="padding: 10px" v-if="!isEdit">
                <i-col :span="6" style="text-align:center;line-height:32px;">
                    {{isZh ? '选择分类' : 'Selected Type'}}:
                </i-col>
                <i-col :span="16">
                    <i-select v-model="classId" style="width: 100%;">
                        <i-option :value="item.value" v-for="item in selectTypeList" :key="item.categoryid">{{item.label}}</i-option>
                    </i-select>
                </i-col>
            </Row>
            <div slot="footer" style="text-align:center;">
                <i-button style="width:80%;" @click="handleAddPolygon">{{isZh ? '确定' : 'confirm'}}</i-button>
            </div>
        </Modal>
    </div>


    <script type="text/x-template" id="selected-map-template">
        <div class="selected-map-wrap" v-click-outside.capture="onClickOutside">
            <div class="selected-map-inner" @click="isShowMapList=true">
                <div class="map-icon" :title="mapTypeStr"><img :src="mapIcon"></div>
            </div>
            <div class="selected-map-list" v-show="isShowMapList">
                <div v-for="(item,index) in mapSelectorList" :data-index="index" :class="{actived:mapType==item.value}" :key="index" @click="selectedMap(index)">
                    <div class="map-icon" :title="item.label">
                        <img :src="item.src">
                    </div>
                </div>
            </div>
            <div class="map-selector-popup" v-show="isShowMapList" :style="mapSelectorPopupSty">
                <div v-if="false" class="MapSelector_item_193IR" :class="{'map_icon_xiansu_off':!isShowXianSu,'map_icon_xiansu_on':isShowXianSu}" style="width:35px" @click="isShowXianSu=!isShowXianSu">
                    <div class="map_selector_icon_text no_selected_icon">{{speed}}</div>
                </div>
                <div class="MapSelector_item_193IR" :class="{'map_icon_traffic_off':!isShowTraffic,'map_icon_traffic_on':isShowTraffic}" style="width:35px" @click="isShowTraffic=!isShowTraffic">
                    <div class="map_selector_icon_text no_selected_icon">{{traffic}}</div>
                </div>
                <div class="MapSelector_item_193IR normal-map" @click="isSatelliteMap=false">
                    <div class="map_selector_icon_text" :class="{'selected_icon':!isSatelliteMap,'no_selected_icon':isSatelliteMap}">{{map}}</div>
                </div>
                <div class="MapSelector_item_193IR satellite-map" @click="isSatelliteMap=true">
                    <div class="map_selector_icon_text" :class="{'selected_icon':isSatelliteMap,'no_selected_icon':!isSatelliteMap}">{{satellite}}</div>
                </div>
            </div>
        </div>
    </script>



    <script type="text/x-template" id="map-track-template">
        <div class="map-mark">
            <div v-show="isClose" class="map-mark-close" @click="isClose=false">
                <div>{{ isZh ? '轨' : 'T' }}</div>
                <div>{{ isZh ? '迹' : 'K' }}</div>
            </div>
            <div v-show="!isClose" class="map-mark-wrapper">
                <div class="map-mark-header">
                    <div class="close-btn" @click="isClose=true">
                        <Icon type="ios-arrow-forward" size="18" />
                    </div>
                    <div class="map-mark-header-content">
                        {{ isZh ? '参考轨迹' : 'Reference trajectory' }}
                        <div></div>
                    </div>
                </div>
                <div class="map-mark-content">
                    <Row style="margin:0 0px 10px 0px;">
                        <i-col span="22" offset="1">
                            <Date-Picker type="date" v-model="date" style="width: 100%" size="small" :clearable="false"></Date-Picker>
                        </i-col>
                    </Row>
                    <Row style="margin:0 0px 10px 0px;">
                        <i-col span="15" offset="1">
                            <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="onClickIcon" @on-change="sosoValueChange" size="small"></i-input>
                        </i-col>
                        <i-col span="6" offset="1">
                            <i-button type="primary" :loading='loading' style="width: 100%" size="small" @click="queryTracks">{{ isZh ? '查询' : 'Query' }}</i-button>
                        </i-col>
                    </Row>
                    <div style="height:215px;overflow-y:auto;overflow-x:hidden;margin:0px 2px">
                        <ul id="gztree" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <script src="js/polyfill.min.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="js/config.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/jquery.ztree.all.min.js"></script>
    <script src="./js/globalorgan.js"></script>
    <script src="js/v-click-outside-x.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/util.js"></script>
    <script src="./maptalks/maptalks.min.js"></script>
    <script>
        var isZh = utils.locale === 'zh';
        document.title = isZh ? '标注管理' : 'Markers Manage';
        iview.lang(isZh ? 'zh-CN' : 'en-US');
        var token = utils.getParameterByName("token");
        var userName = utils.getParameterByName("username");
        var map = null;
        var vRoot = null;
        var rowData = null;
        var isMove = true;
        var mapType = utils.getMapType();
        var points1List = [];
        var points2List = [];
        var categoryid = null;
        var symbol = {
            'lineColor': '#e4393c',
            'lineWidth': 2,
            'polygonFill': 'rgb(135,196,240)',
            'polygonOpacity': 0
        };



        Vue.component('map-track', {
            data: function() {
                return {
                    isZh: isZh,
                    loading: false,
                    isClose: true,
                    sosoValue: '',
                    date: new Date()
                }
            },
            methods: {
                queryTracks: function() {

                    if (this.sosoValue == '') {
                        this.$Message.error(isZh ? '请选择设备ID' : 'Please select a device ID');
                        return;
                    };
                    var me = this;
                    var offset = DateFormat.getOffset();
                    var day = this.date.getFullYear() + '-' + (this.date.getMonth() + 1) + '-' + +this.date.getDate()
                    var url = myUrls.queryTracks();
                    var data = {
                        deviceid: this.sosoValue,
                        lbs: 1,
                        timezone: offset,
                        begintime: day + ' 00:00:00',
                        endtime: day + ' 23:59:59',
                    };
                    me.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0 && resp.records != null) {
                            var records = resp.records;
                            me.$emit('on-map-track', records)
                        } else {
                            me.$Message.error(isZh ? '没有轨迹' : 'No Track');
                            me.$emit('on-map-track', []);
                        }
                        me.loading = false;
                    }, function() {
                        me.loading = false;
                    });

                },
                sosoValueChange: function() {
                    var newVal = this.sosoValue;
                    if (newVal == '' || newVal == null) {
                        this.treeGroupList[0].open = true;
                        this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);
                    } else {
                        var limitcount = 0;
                        var data = this.variableDeepGroupSearch(this.treeGroupList, newVal.toLowerCase(), limitcount);
                        if (data.length == 0) {
                            data.push({
                                name: isZh ? '无数据' : 'No data',
                                nocheck: true
                            })
                        }
                        this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, data);
                    }
                },
                onClickIcon: function() {
                    if (this.sosoValue != '') {
                        this.treeGroupList[0].open = true;
                        this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);
                        this.sosoValue = '';
                    }
                },
                queryDevicesTree: function() {
                    var me = this;
                    this.loading = true;
                    GlobalOrgan.getInstance().getGlobalOrganData(function(rootuser) {
                        me.loading = false;
                        me.setTreeDataList(rootuser);
                    })
                },
                setTreeDataList: function(rootuser) {
                    var me = this;
                    this.gsetting = {
                        check: {
                            enable: true,
                            chkStyle: "radio",
                            radioType: "all"
                        },
                        view: {
                            dblClickExpand: false
                        },
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        callback: {
                            onCheck: function() {
                                var nodes = me.treeObj.getCheckedNodes();
                                if (nodes.length) {
                                    me.sosoValue = nodes[0].deviceid;
                                }
                            },

                        }
                    };

                    this.treeGroupList = [this.castUsersTreeToDevicesTree(rootuser, true, true)];

                    this.treeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);
                },
                variableDeepGroupSearch: function(treeDataFilter, searchWord, limitcount) {
                    var childTemp = [];
                    var that = this;
                    for (var i = 0; i < treeDataFilter.length; i++) {
                        var copyItem = null;
                        var item = treeDataFilter[i];
                        if (item != null) {

                            var isFound = false;
                            if (item.name.toLowerCase().indexOf(searchWord) != -1) {
                                copyItem = item;
                                copyItem.open = false;
                                isFound = true;
                            }
                            if (isFound == false && item.children) {
                                // item.expand = true;
                                // childTemp.push(item);
                                var rs = that.variableDeepGroupSearch(item.children, searchWord, limitcount);
                                if (rs && rs.length > 0) {
                                    copyItem = deepClone(item);
                                    copyItem.children = rs;
                                    copyItem.open = true;
                                    isFound = true;
                                }
                            }

                            if (isFound == true) {
                                limitcount++;
                                childTemp.push(copyItem);

                                if (limitcount > 1000) {
                                    break;
                                }
                            }
                        }
                    }

                    return childTemp;
                },
                getDeviceListGroups: function(groups, isNeedDevice, username, isNeedRadio) {
                    var groupsList = [],
                        me = this;
                    if (groups != null) {
                        for (var i = 0; i < groups.length; ++i) {
                            var group = groups[i];
                            var groupObj = {
                                groupid: group.groupid,
                                name: group.groupname,
                                icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg",
                                nocheck: isNeedRadio,
                            }
                            if (isNeedDevice) {
                                groupObj.render = utils.renderGroup;

                            } else {
                                groupObj.totalCount = group.devices.length;
                                groupObj.name = group.groupname + '(' + group.devices.length + ')';
                            }
                            if (isNeedDevice && group.devices) {
                                groupObj.totalCount = group.devices.length;
                                groupObj.children = [];
                                groupObj.name = group.groupname + '(' + group.devices.length + ')';
                                group.devices.forEach(function(device) {
                                    groupObj.children.push({
                                        deviceid: device.deviceid,
                                        name: device.devicename,
                                        icon: utils.getzTreeDeviceIcon(device),
                                    });
                                    utils.deviceInfos[device.deviceid] = {
                                        deviceid: device.deviceid,
                                        devicename: device.devicename,
                                        username: username,
                                        groupid: group.groupid,
                                        groupname: group.groupname,
                                        forwardid: device.forwardid,
                                        needalarmstr: device.needalarmstr,
                                        creater: device.creater,
                                        devicetype: device.devicetype,
                                    }
                                });
                            }
                            groupsList.push(groupObj);
                        }
                    }

                    if (groupsList.length == 0) {
                        groupsList.push({
                            name: 'Default(0)',
                            groupid: 0,
                            totalCount: 0,
                            children: [],
                            nocheck: isNeedRadio,
                            icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg"
                        });
                    }
                    return groupsList;

                },
                doCastUsersTreeToDevicesTree: function(usersTrees, isNeedDevice, isNeedRadio) {
                    var devicesTreeRecord = [];
                    if (usersTrees != null && usersTrees.length > 0) {
                        for (var i = 0; i < usersTrees.length; ++i) {
                            var usersTree = usersTrees[i];
                            var username = usersTree.username;
                            var subusers = usersTree.subusers;
                            var currentsubDevicesTreeRecord = {
                                name: username,
                                username: username,
                                nocheck: isNeedRadio,
                                icon: myUrls.viewhost + "zTreeStyle/img/diy/account.svg"
                            };
                            var deviceListGroups = this.getDeviceListGroups(usersTree.groups, isNeedDevice, username, isNeedRadio);
                            if (username != null && subusers != null && subusers.length > 0) {
                                var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                                subDevicesTreeRecord = deviceListGroups.concat(subDevicesTreeRecord);
                                currentsubDevicesTreeRecord.children = subDevicesTreeRecord;
                            } else {
                                currentsubDevicesTreeRecord.children = deviceListGroups;

                            }
                            var totalCount = 0;
                            if (currentsubDevicesTreeRecord.children) {
                                for (var j = 0; j < currentsubDevicesTreeRecord.children.length; ++j) {
                                    totalCount += currentsubDevicesTreeRecord.children[j].totalCount;
                                }
                            }
                            currentsubDevicesTreeRecord.totalCount = totalCount;
                            currentsubDevicesTreeRecord.name = username + "(" + totalCount + ")";
                            devicesTreeRecord.push(currentsubDevicesTreeRecord);
                        }
                    }
                    return devicesTreeRecord;
                },
                castUsersTreeToDevicesTree: function(devicesTreeRecord, isNeedDevice, isNeedRadio) {
                    var iViewTree = {
                        open: true,
                        nocheck: isNeedRadio,
                        icon: myUrls.viewhost + "zTreeStyle/img/diy/1_open.png"
                    };
                    if (devicesTreeRecord != null) {
                        var username = devicesTreeRecord.username;
                        var subusers = devicesTreeRecord.subusers;
                        iViewTree.name = username;
                        iViewTree.username = username;
                        var deviceListGroups = this.getDeviceListGroups(devicesTreeRecord.groups, isNeedDevice, username, isNeedRadio);
                        if (username != null && subusers != null && subusers.length > 0) {
                            var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                            iViewTree.children = deviceListGroups.concat(subDevicesTreeRecord);
                        } else {
                            iViewTree.children = deviceListGroups;
                        }
                        var totalCount = 0;
                        if (iViewTree.children) {
                            for (var i = 0; i < iViewTree.children.length; ++i) {
                                totalCount += iViewTree.children[i].totalCount;
                            }
                        }
                        iViewTree.name = username + "(" + totalCount + ")";
                    }
                    return iViewTree;
                },

            },
            mounted: function() {
                this.queryDevicesTree();
            },
            template: document.getElementById('map-track-template').innerHTML
        });


        var messages = {
            defaultLang: 'zh',
            en: {
                monitor: {
                    reLogin: "Please re-login and automatically jump to the login page in 2 seconds",
                },
            },
            zh: {
                monitor: {
                    reLogin: "请重新登录,2秒后自动跳转登录页面",
                },
            }
        }

        function treeItemRender(h, params) {
            var root = params.root,
                node = params.node,
                data = params.data;
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '343px'
                },
            }, [
                h('span', [
                    h('span', {
                        style: {
                            width: '271px',
                            lineHeight: '23px',
                            display: 'inline-block',
                        }
                    }, data.title)
                ]),

                h('Button', {
                    props: {
                        type: 'info',
                        size: 'small',
                    },
                    style: {
                        marginRight: '5px',
                        marginTop: '-2px',
                    },
                    on: {
                        click: function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            vRoot.isEditClass = true;
                            vRoot.addClassModal = true;
                            vRoot.isPoint = false;
                            vRoot.typeName = data.name;
                            categoryid = data.categoryid;
                        }
                    }
                }, isZh ? "编辑" : "Edit"),
                h('Icon', {
                    props: {
                        size: 18,
                        type: "md-close",
                    },
                    style: {
                        // width: '54px'
                        color: "#DEE1E6",
                        border: "1px solid #DEE1E6",
                        borderRadius: "50%",
                    },
                    on: {
                        click: function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            var content = isZh ? "确定要删除分类吗" : "Are you sure you want to delete the category?";

                            vRoot.$Modal.confirm({
                                title: isZh ? "温馨提示" : "Tips",
                                content: content,
                                onOk: function() {
                                    vRoot.deleteTreeItem(data);

                                }
                            })
                            return false;
                        }
                    }
                }, '')
            ]);
        }

        function treeChilrenRender(h, params) {
            var root = params.root,
                node = params.node,
                data = params.data;
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '343px',
                    height: '23.5px'
                },
                on: {
                    click: function(e) {}
                }
            }, [
                h('span', {
                        style: {
                            lineHeight: '24px',
                            width: '253px',
                            display: 'inline-block',
                        },
                        attrs: {
                            class: 'show'
                        },
                        on: {
                            click: function(e) {}
                        }
                    },
                    data.title),
                h('Button', {
                    props: {
                        type: 'info',
                        size: 'small',
                        // disabled: data.type != 5,
                    },
                    style: {
                        marginRight: '5px',
                        marginTop: '-2px',
                    },
                    on: {
                        click: function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            rowData = data;
                            vRoot.isCircular = false;
                            vRoot.modal = false;
                            vRoot.isPolygon = false;
                            vRoot.isEdit = true;
                            vRoot.isPoint = false;
                            vRoot.geoName = data.name;
                            vRoot.addPolygonModal = true;
                        }
                    }
                }, isZh ? "编辑" : "Edit"),
                h('Icon', {
                    props: {
                        size: 18,
                        type: "md-close",
                    },
                    style: {
                        border: "1px solid #DEE1E6",
                        borderRadius: "50%",
                        color: "#DEE1E6",
                        marginTop: "-1px"
                    },
                    on: {
                        click: function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            var content = content = isZh ? "确定要删除标注吗" : "Are you sure you want to delete the fence?";

                            vRoot.$Modal.confirm({
                                title: isZh ? "温馨提示" : "Tips",
                                content: content,
                                onOk: function() {
                                    vRoot.deleteTreeChildren(data);
                                }
                            })
                            return false;
                        }
                    }
                }, ''),
            ]);
        }
        (function() {


            Vue.component('selected-map', {
                data: function() {
                    return {
                        isShowMapList: false, //是否显示选择框
                        isSatelliteMap: false, //是否卫星地图
                        isShowXianSu: false,
                        isShowTraffic: false,
                        mapSelectorList: [{
                            label: isZh ? "百度地图" : "BaiduMap",
                            value: "bMap",
                            src: './images/map/bMap.png',
                        }, {
                            label: isZh ? "高德地图" : "AMap",
                            value: "aMap",
                            src: './images/map/aMap.png',
                        }, {
                            label: isZh ? "国内谷歌" : "gChinaMap",
                            value: "gChinaMap",
                            src: './images/map/gChinaMap.png',
                        }, {
                            label: isZh ? "谷歌地图" : "GoogleMap",
                            value: "gMap",
                            src: './images/map/gMap.png',
                        }, ],
                        speed: isZh ? "限速" : "Speed",
                        traffic: isZh ? "路况" : "Traffic",
                        map: isZh ? "地图" : "Map",
                        satellite: isZh ? "卫星" : "Satellite",
                        currentMapIndex: 0,
                        mapType: mapType
                    }
                },
                methods: {
                    onClickOutside: function() {
                        this.isShowMapList = false;
                    },
                    selectedMap: function(index) {

                        var item = this.mapSelectorList[index];
                        this.mapType = item.value;
                        this.$emit('select-map', {
                            mapType: item.value,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                        this.currentMapIndex = index;
                    },
                    getCurrentMapIndex: function() {
                        var index = 0;
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                index = i;
                                break;
                            }
                        }
                        return index;
                    }
                },
                computed: {
                    mapIcon: function() {
                        return './images/map/' + this.mapType + '.png';
                    },
                    mapTypeStr: function() {
                        var mapTypeStr = '';
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                mapTypeStr = item.label;
                                break;
                            }
                        }
                        return mapTypeStr;
                    },
                    mapSelectorPopupSty: function() {
                        var top = 46;
                        var currentMapIndex = this.currentMapIndex;
                        var maxCurrentIndex = this.mapSelectorList.length - 1;

                        top = top * (currentMapIndex + 1);

                        if (currentMapIndex == maxCurrentIndex) {
                            top -= 14;
                        }

                        return {
                            top: top + 'px'
                        }
                    }
                },
                watch: {
                    isSatelliteMap: function() {
                        this.$emit('select-map', {
                            mapType: this.mapType,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                    },
                    isShowXianSu: function(newVal) {
                        this.$emit('switch-xiansu', newVal);
                    },
                    isShowTraffic: function(newVal) {
                        this.$emit('switch-traffic', newVal);
                    },
                },
                mounted: function() {
                    this.currentMapIndex = this.getCurrentMapIndex();
                },
                template: document.getElementById('selected-map-template').innerHTML
            })


            vRoot = new Vue({
                el: "#container",
                i18n: utils.getI18n(),
                data: {
                    searchValue: "",
                    searchDeviceVal: "",
                    isEdit: false,
                    isEditClass: false,
                    map: null,
                    typeName: '',
                    classId: "",
                    geoName: "",
                    addClassModal: false,
                    addPolygonModal: false,
                    isCircular: false,
                    isPolygon: false,
                    isPoint: false,
                    radius: 2000,
                    min: 200,
                    max: 100000,
                    modal: false,
                    type: null, // 1 是圈 2是多边形 3是行政区域'
                    mapCenterPoint: null,
                    treeData: [],
                    originalData: [],
                    mapType: mapType,
                    pointName: '',
                    wgs84Lon: '',
                    wgs84Lat: '',
                },
                methods: {
                    onQueryTrack: function(records) {
                        var points = [];
                        for (var i = 0; i < records.length; i++) {
                            var track = records[i];
                            track.callat = Number(track.callat.toFixed(5));
                            track.callon = Number(track.callon.toFixed(5));
                            var g_lon_lat = wgs84togcj02(track.callon, track.callat);
                            track.gpoint = {
                                y: g_lon_lat[1],
                                x: g_lon_lat[0]
                            };
                            var lng_lat = wgs84tobd09(track.callon, track.callat);
                            track.bpoint = {
                                y: lng_lat[1],
                                x: lng_lat[0]
                            };

                            if (this.mapType == 'bMap') {
                                points.push(track.bpoint);
                            } else {
                                points.push(track.gpoint);
                            }
                        }
                        this.trackPoints = records;
                        this.drawTrack(points);
                        this.fitExtent(points);
                    },
                    fitExtent: function(pointList) {
                        if (pointList.length > 1) {
                            var polygon = new maptalks.Polygon(pointList);
                            this.map.fitExtent(polygon.getExtent(), 0);
                            polygon = null;
                        } else {
                            var point = pointList[0];
                            if (point) {
                                this.map.setCenter(point);
                            }
                        }
                    },
                    drawTrack: function(points) {
                        this.lineLayer.clear();
                        if (points.length > 0) {
                            var first = points[0];
                            var last = points[points.length - 1];

                            new maptalks.Marker(
                                [first.x, first.y], {
                                    symbol: {
                                        'markerFile': './images/map/marker_qidian.png',
                                        'markerWidth': 30,
                                        'markerHeight': 30,
                                        'markerRotation': 0,
                                        'markerDy': 0,
                                        'markerDx': 0,
                                    }
                                }
                            ).addTo(this.lineLayer);

                            new maptalks.Marker(
                                [last.x, last.y], {
                                    symbol: {
                                        'markerFile': './images/map/marker_zhongdian.png',
                                        'markerWidth': 30,
                                        'markerHeight': 30,
                                        'markerRotation': 0,
                                        'markerDy': 0,
                                        'markerDx': 0,
                                    }
                                }
                            ).addTo(this.lineLayer);

                            new maptalks.LineString(
                                points, {
                                    symbol: {
                                        'lineColor': {
                                            'type': 'linear',
                                            'colorStops': [
                                                [0.00, 'red'],
                                                [1.00, 'red']
                                            ]
                                        },
                                        'lineWidth': 4
                                    }
                                }).addTo(this.lineLayer);

                            this.fitExtent(points);
                        }
                    },
                    variableDeepSearch: function(treeDataFilter, searchWord, limitcount) {
                        var childTemp = [];
                        var that = this;
                        for (var i = 0; i < treeDataFilter.length; i++) {
                            var copyItem = null;
                            var item = treeDataFilter[i];
                            if (item != null) {

                                var isFound = false;
                                if (item.name.indexOf(searchWord) != -1 || (item.deviceid && item.deviceid.toLowerCase().indexOf(searchWord) != -1)) {
                                    copyItem = item;
                                    copyItem.open = false;
                                    isFound = true;
                                }
                                if (isFound == false && item.children && item.children.length > 0) {
                                    // item.expand = true;
                                    // childTemp.push(item);
                                    var rs = that.variableDeepSearch(item.children, searchWord, limitcount);
                                    if (rs && rs.length > 0) {
                                        copyItem = deepClone(item);
                                        copyItem.children = rs;
                                        copyItem.open = true;
                                        isFound = true;
                                    }
                                }

                                if (isFound == true) {
                                    limitcount++;
                                    childTemp.push(copyItem);

                                    if (limitcount > 1000) {
                                        break;
                                    }
                                }
                            }
                        }

                        return childTemp;
                    },

                    onSelectMap: function(item) {
                        this.mapType = item.mapType;
                        this.setMapType(item);
                    },
                    onSwitchTraffic: function(traffic) {
                        var isBMap = this.mapType == 'bMap';
                        if (traffic) {
                            if (isBMap) {
                                this.baiduTrafficLayer.show();
                            } else {
                                this.googleTrafficLayer.show();
                            }
                        } else {
                            if (isBMap) {
                                this.baiduTrafficLayer.hide();
                            } else {
                                this.googleTrafficLayer.hide();
                            }
                        }
                    },
                    setMapType: function(mapInfo) {
                        this.map.removeLayer('baiduText');
                        this.map.removeLayer('aliText');
                        var me = this;
                        var newMapType = mapInfo.mapType;
                        var satelliteMap = mapInfo.satelliteMap;

                        var traffic = mapInfo.traffic;
                        if (newMapType == 'bMap') {
                            me.map.setSpatialReference({
                                projection: 'baidu'
                            });
                            var baseOption = satelliteMap ? baiduSatelliteBaseOption : baiduNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('baiduText', baiduTextBaseOption)
                                me.map.addLayer(textlayer);
                            }

                        } else if (newMapType == 'gMap') {
                            var baseOption = satelliteMap ? googleSatelliteBaseOption : googleNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                        } else if (newMapType == 'aMap') {
                            var baseOption = satelliteMap ? aliSatelliteBaseOption : aliNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('aliText', aliTextBaseOption)
                                me.map.addLayer(textlayer);
                            }

                        } else if (newMapType == 'gChinaMap') {
                            var baseOption = satelliteMap ? googleChinaSatelliteBaseOption : googleChinaNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                        }

                        me.addTrafficLayer(traffic);
                    },
                    addTrafficLayer: function(traffic) {

                        if (this.baiduTrafficLayer == null) {
                            this.baiduTrafficLayer = new maptalks.TileLayer("baidutraffic", {

                                urlTemplate: function(x, y, z) {
                                    var domain = '';
                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return baiduTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.baiduTrafficLayer);
                            this.baiduTrafficLayer.hide();
                        }

                        if (this.googleTrafficLayer == null) {
                            this.googleTrafficLayer = new maptalks.TileLayer("googletraffic", {
                                urlTemplate: function(x, y, z) {

                                    y = Math.pow(2, z) - 1 - y;
                                    var domain = '';
                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return googleTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.googleTrafficLayer);
                            this.googleTrafficLayer.hide();
                        }

                        this.onSwitchTraffic(traffic);

                    },
                    onClickAddPoint: function() {
                        if (this.wgs84Lat && this.wgs84Lon) {
                            this.addPolygonModal = true;
                        } else {
                            this.$Message.error(isZh ? '请添加经纬度' : 'Please add latitude and longitude');
                        }
                    },
                    onClickCheck: function() {
                        var me = this;
                        if (this.wgs84Lat && this.wgs84Lon) {
                            me.polygonLayer.clear();
                            var isBMap = me.mapType == 'bMap';
                            var lon = Number(this.wgs84Lon);
                            var lat = Number(this.wgs84Lat);
                            if (isBMap) {
                                var lon_lat = wgs84tobd09(lon, lat);
                            } else {
                                var lon_lat = wgs84togcj02(lon, lat);
                            }
                            new maptalks.Marker(
                                lon_lat, {
                                    symbol: [{
                                        'markerFile': './images/map/marker_m.png',
                                        'markerWidth': 30,
                                        'markerHeight': 30,
                                        'markerRotation': 0,
                                        'markerDy': 0,
                                        'markerDx': 0,
                                    }]
                                }
                            ).addTo(me.polygonLayer);
                            me.map.setCenter({
                                x: lon_lat[0],
                                y: lon_lat[1],
                            })
                        } else {
                            this.$Message.error(isZh ? '请添加经纬度' : 'Please add latitude and longitude');
                        }
                    },
                    addPointToMap: function(name, lon_lat) {
                        new maptalks.Marker(
                            lon_lat, {
                                symbol: [{
                                    'markerFile': './images/map/marker_m.png',
                                    'markerWidth': 30,
                                    'markerHeight': 30,
                                    'markerRotation': 0,
                                    'markerDy': 0,
                                    'markerDx': 0,
                                }, {
                                    'textFaceName': 'sans-serif',
                                    'textName': name,
                                    'textSize': 12,
                                    'textDy': 10,
                                    'textFill': '#ffffff',
                                    'textOpacity': 1,
                                    'textHaloFill': '#00A8D4',
                                    'textHaloRadius': 5,
                                    'textWrapWidth': null,
                                    'textWrapCharacter': '\n',
                                    'textLineSpacing': 0,
                                }]

                            }
                        ).addTo(this.polygonLayer)
                    },
                    initMap: function() {
                        var me = this;

                        me.lastMapType = this.mapType;

                        this.map = new maptalks.Map('bmap', {
                            centerCross: true,
                            center: [106, 36.11],
                            zoom: 5,
                            minZoom: 4,
                            maxZoom: 20,
                            scaleControl: true,
                            dragRotate: false,
                            dragPitch: false,
                        });

                        this.setMapType({
                            mapType: this.mapType,
                            traffic: false,
                            xiansu: false,
                            satelliteMap: false
                        });


                        me.isLoadRoutePlanning = false;
                        me.startCoordinate = null;
                        me.endCoordinate = null;


                        var customPosition = new maptalks.control.Zoom({
                            'position': {
                                'bottom': '10',
                                'right': '10'
                            },
                            'slider': false,
                            'zoomLevel': false
                        });
                        this.map.addControl(customPosition);



                        var layer = this.polygonLayer = new maptalks.VectorLayer('vector').addTo(this.map);
                        this.lineLayer = new maptalks.VectorLayer('line').addTo(this.map);

                        var drawTool = this.drawTool = new maptalks.DrawTool({
                            mode: 'Point',
                            symbol: symbol
                        }).addTo(this.map).disable();


                        this.drawTool.on('mousemove', function(param) {
                            if (me.isCircular) {
                                me.radius = param.geometry.getRadius().toFixed(2);
                            }
                        })

                        this.drawTool.on('drawend', function(param) {
                            layer.addGeometry(param.geometry);
                            drawTool.disable();
                            me.addPolygonModal = true;
                            if (me.isCircular) {
                                var point = geometry.getCoordinates();
                                var lon_lat = [];
                                if (isBMap) {
                                    lon_lat = bd09towgs84(point.x, point.y);
                                } else {
                                    lon_lat = gcj02towgs84(point.x, point.y);
                                }
                                points1List = lon_lat;
                            } else {
                                var points = geometry.getCoordinates()[0];
                                var lon_lat_s = [];
                                if (isBMap) {
                                    lon_lat_s = bdPointsToWgs84s(points);
                                } else {
                                    lon_lat_s = googlePointsToWgs84s(points);
                                }
                                points2List = lon_lat_s;
                            }
                        });

                        this.map.on('click', function(e) {
                            if (me.isPoint) {
                                me.polygonLayer.clear();
                                var isBMap = me.mapType == 'bMap';
                                var lon = e.coordinate.x;
                                var lat = e.coordinate.y;
                                if (isBMap) {
                                    var lon_lat = bd09towgs84(lon, lat);
                                } else {
                                    var lon_lat = gcj02towgs84(lon, lat);
                                }
                                new maptalks.Marker(
                                    [lon, lat], {
                                        symbol: [{
                                            'markerFile': './images/map/marker_m.png',
                                            'markerWidth': 30,
                                            'markerHeight': 30,
                                            'markerRotation': 0,
                                            'markerDy': 0,
                                            'markerDx': 0,
                                        }]
                                    }
                                ).addTo(me.polygonLayer);
                                me.wgs84Lon = lon_lat[0].toFixed(5);
                                me.wgs84Lat = lon_lat[1].toFixed(5);
                            }
                        });

                    },
                    setViewPortCenter: function(pointList) {
                        if (pointList.length == 1) {
                            this.map.setCenterAndZoom(pointList[0], 12)
                        } else if (pointList.length > 1) {
                            var polygon = new maptalks.Polygon(pointList);
                            this.map.fitExtent(polygon.getExtent(), 0);
                            polygon = null;
                        }

                    },
                    openClassModal: function() {
                        this.isPolygon = false;
                        this.isCircular = false;
                        this.addClassModal = true;
                        this.drawTool.disable();
                    },

                    convertAmapRouteJsonToPoints: function(amapRoute) {
                        var points = [];
                        var totalStepsStr = "";
                        var paths = amapRoute.paths;
                        if (paths) {
                            var path = paths[0];
                            if (path) {
                                var steps = path.steps;
                                if (steps) {
                                    steps.forEach(function(stepStr) {
                                        totalStepsStr += stepStr.polyline + ";";
                                    })

                                }
                            }
                        }

                        if (totalStepsStr.length > 1) {
                            var splitedSteps = totalStepsStr.split(";");
                            splitedSteps.forEach(function(step) {
                                if (step.length > 0) {
                                    var onePoint = step.split(",");
                                    var x = onePoint[0];
                                    var y = onePoint[1];
                                    var wgs84Ponts = gcj02towgs84(Number(x), Number(y));
                                    points.push({
                                        x: Number(wgs84Ponts[0].toFixed(6)),
                                        y: Number(wgs84Ponts[1].toFixed(6)),
                                    })
                                }
                            })
                        }

                        return points;
                    },
                    convertWgs84PointsToMapPoints: function(wgs84Ponts) {
                        var isBMap = this.mapType == 'bMap';
                        var mapPonts = [];
                        wgs84Ponts.forEach(function(point) {
                            var point = utils.getCurrentMapCoordinate(isBMap, [point.x, point.y]);
                            mapPonts.push({
                                x: point[0],
                                y: point[1],
                            })
                        });
                        return mapPonts;
                    },
                    handleAddType: function() {
                        if (this.typeName) {
                            var me = this;
                            if (this.isEditClass) {
                                var url = myUrls.editCustomMarkerCategory();
                                var data = {
                                    name: this.typeName,
                                    categoryid: categoryid,
                                };
                                utils.sendAjax(url, data, function(resp) {
                                    if (resp.status == 0) {
                                        me.originalData.forEach(function(item) {
                                            if (item.categoryid === data.categoryid) {
                                                item.name = data.name;
                                                item.title = data.name + '(' + item.creater + ')';
                                            }
                                        });
                                        me.treeData.forEach(function(item) {
                                            if (item.categoryid === data.categoryid) {
                                                item.name = data.name;
                                                item.title = data.name + '(' + item.creater + ')';
                                            }
                                        });
                                        me.$Message.success(isZh ? "编辑成功" : "Edit successfully");
                                        me.addClassModal = false;
                                    } else {
                                        me.$Message.error(isZh ? "编辑失败" : "Edit failed");
                                    }
                                });
                            } else {
                                var url = myUrls.addCustomMarkerCategory();
                                var data = {
                                    name: this.typeName
                                };
                                utils.sendAjax(url, data, function(resp) {
                                    if (resp.status === 0 && resp.record) {
                                        var record = resp.record;
                                        record.title = record.name,
                                            record.children = [];
                                        record.render = treeItemRender;
                                        me.originalData.push(record);
                                        me.treeData = me.originalData;
                                        me.$Message.success(isZh ? "添加成功" : "Added successfully");
                                        me.addClassModal = false;
                                        me.typeName = '';
                                    } else {
                                        me.$Message.error(isZh ? "添加失败" : "Add failed");
                                    }
                                });
                            }

                        } else {
                            this.$Message.error(isZh ? "请填写类型名称" : "Please fill in the type name");
                        }
                    },
                    searchChange: utils.debounce(function(vm, value) {
                        if (value) {
                            var filterData = [];
                            var originalData = deepClone(vm.originalData);
                            originalData.forEach(function(item) {
                                item.expand = true;
                                if (item.title.indexOf(value) != -1) {
                                    filterData.push(item);
                                } else {
                                    var children = []
                                    item.children.forEach(function(record) {
                                        if (record.title.indexOf(value) != -1) {
                                            children.push(record);
                                        }
                                    });
                                    if (children.length) {
                                        item.children = children;
                                        filterData.push(item);
                                    }
                                }
                            });
                            vm.treeData = filterData;
                        } else {
                            vm.treeData = vm.originalData;
                        }

                    }, 500),
                    deleteTreeItem: function(data) {
                        var url = myUrls.delCustomMarkerCategory(),
                            me = this;
                        utils.sendAjax(url, {
                            categoryid: data.categoryid
                        }, function(resp) {
                            if (resp.status === 0) {
                                var index = null;
                                me.cancelSelected();
                                me.originalData.forEach(function(item, idx) {
                                    if (item.categoryid === data.categoryid) {
                                        index = idx;
                                    }
                                });
                                me.originalData.splice(index, 1);
                                me.treeData = me.originalData;
                            } else if (resp.status === 1) {
                                me.$Message.error(isZh ? "不能删除这个分类,还有围栏没删除" : "You can't delete this category. There are still fences");
                            }
                        })
                    },
                    deleteTreeChildren: function(data) {

                        var url = myUrls.delCustomMarkerRecord(),
                            me = this;
                        utils.sendAjax(url, {
                            categoryid: data.categoryid,
                            custommarkeruuid: data.custommarkeruuid
                        }, function(resp) {
                            if (resp.status === 0) {
                                me.cancelSelected();
                                me.originalData.forEach(function(item, idx) {
                                    if (item.categoryid === data.categoryid) {
                                        var i = null;
                                        item.children.forEach(function(item, j) {
                                            if (item.custommarkeruuid === data.custommarkeruuid) {
                                                i = j;
                                            }
                                        });
                                        item.children.splice(i, 1);
                                    }
                                });
                            } else {
                                me.$Message.error(isZh ? "删除失败" : "Deletion failed");
                            }
                        })
                    },
                    transformPoint: function(pointList) {
                        var points = [];
                        var iteratior = function(item) {
                            var pointStr = item.split(',')
                            var pointArr = bd09towgs84(Number(pointStr[0].trim()), Number(pointStr[1].trim()));
                            points.push({
                                lon: pointArr[0].toFixed(6),
                                lat: pointArr[1].toFixed(6),
                            })
                        }
                        pointList.forEach(iteratior);
                        return points;
                    },
                    getWgs84Boundaries: function(boundaries) {
                        var pointList = [],
                            me = this;
                        boundaries.forEach(function(item) {
                            var points = me.transformPoint(item.split(";"));
                            pointList = pointList.concat(points);
                        })
                        return pointList;
                    },
                    setMapZoom: function(value) {
                        var zoom = 4;
                        if (value > 90000) {
                            zoom = 5;
                        } else if (value > 90000) {
                            zoom = 6;
                        } else if (value > 70000) {
                            zoom = 7;
                        } else if (value > 50000) {
                            zoom = 8;
                        } else if (value > 40000) {
                            zoom = 9;
                        } else if (value > 30000) {
                            zoom = 10;
                        } else if (value > 20000) {
                            zoom = 11;
                        } else if (value > 10000) {
                            zoom = 12;
                        } else if (value > 5000) {
                            zoom = 13;
                        } else if (value > 1000) {
                            zoom = 14;
                        } else {
                            zoom = 16;
                        };
                        this.map.setZoom(zoom);
                    },
                    drawCircular: function() {
                        this.drawTool.enable();
                        this.cancelSelected();
                        this.isEdit = false;
                        this.isPoint = false;
                        this.isCircular = true;
                        this.isPolygon = false;
                        this.type = 1;
                        this.radius = 0;
                        this.geoName = "";
                        this.drawTool.setMode('Circle').enable();
                    },
                    drawPolygon: function() {
                        this.type = 2;
                        this.isPoint = false;
                        this.isCircular = false;
                        this.isPolygon = true;
                        this.isEdit = false;
                        this.geoName = "";
                        this.cancelSelected();
                        this.drawTool.setMode('Polygon').enable();
                    },
                    drawPoint: function() {
                        this.type = 6;
                        this.isCircular = false;
                        this.isPolygon = false;
                        this.isPoint = true;
                        this.isEdit = false;
                        this.geoName = "";
                        this.cancelSelected();
                    },
                    handleAddPolygon: function() {
                        var me = this;
                        if (this.isEdit) {
                            var url = myUrls.editCustomMarkerRecord();
                            var data = deepClone(rowData);
                            data.name = this.geoName;
                            utils.sendAjax(url, data, function(resp) {
                                if (resp.status == 0) {
                                    rowData.title = data.name + '(' + rowData.creater + ')';
                                    rowData.name = data.name;
                                    me.$Message.success(isZh ? "编辑成功" : "Edit successfully");
                                    me.addPolygonModal = false;
                                } else {
                                    me.$Message.error(isZh ? "编辑失败" : "Edit failed");
                                }
                            });

                        } else {
                            if (this.selectTypeList.length === 0) {
                                this.$Message.error(isZh ? "请先添加分类" : "Please add classification first");
                                return;
                            }
                            if (this.geoName == "") {
                                this.$Message.error(isZh ? "请填写围栏名称" : "Please fill in the name of the fence");
                                return;
                            }
                            if (!this.classId) {
                                me.$Message.success(isZh ? "请选择分类" : "Please select type")
                                return;
                            }
                            if (this.isCircular) {
                                this.handleSaveCircular();
                            } else {
                                if (this.isPoint) {
                                    var data = {
                                        categoryid: this.classId,
                                        lon1: Number(this.wgs84Lon),
                                        lat1: Number(this.wgs84Lat),
                                        type: 6,
                                        name: this.geoName,
                                    };
                                } else {
                                    var data = {
                                        categoryid: this.classId,
                                        points2: JSON.stringify(points2List),
                                        type: 2,
                                        name: this.geoName,
                                    };
                                }

                                var url = myUrls.addcuStomMarkerRecord();

                                utils.sendAjax(url, data, function(resp) {
                                    if (resp.status === 0 && resp.record) {

                                        me.originalData.forEach(function(item) {
                                            if (data.categoryid === item.categoryid) {
                                                resp.record.title = resp.record.name + '(' + resp.record.creater + ')';
                                                resp.record.categoryid = data.categoryid;
                                                resp.record.render = treeChilrenRender;
                                                resp.record.checked = true;
                                                item.children.push(resp.record);
                                            }
                                        })
                                        if (utils.getMapType() == 'bMap') {
                                            var lon_lat = wgs84tobd09(resp.record.lon1, resp.record.lat1);
                                        } else {
                                            var lon_lat = wgs84togcj02(resp.record.lon1, resp.record.lat1);
                                        }
                                        if (me.isPoint) {
                                            me.addPointToMap(data.name, lon_lat)
                                        } else {
                                            me.addFenceLabel(data.name, lon_lat);
                                        }
                                        me.$Message.success(isZh ? "添加成功" : "Added successfully");
                                        me.isPolygon = false;
                                        me.addPolygonModal = false;
                                    } else {
                                        me.$Message.error(isZh ? "添加失败" : "Add failed");
                                        me.$Message.success(isZh ? "添加成功" : "Added successfully");
                                    }
                                });
                            }
                        }
                    },
                    filterOriginalData: function(categorys) {
                        var originalData = [];
                        categorys.forEach(function(item) {
                            var treeItem = {
                                title: item.name + '(' + item.creater + ')',
                                name: item.name,
                                creater: item.creater,
                                categoryid: item.categoryid,
                                children: [],
                                render: treeItemRender
                            };
                            item.records.forEach(function(record) {
                                record.title = record.name + '(' + record.creater + ')';
                                record.render = treeChilrenRender;
                                record.categoryid = item.categoryid;
                                treeItem.children.push(record);
                            });
                            originalData.push(treeItem);
                        });
                        this.originalData = originalData;
                        this.treeData = originalData;
                    },
                    addFenceLabel: function(name, lon_lat) {
                        new maptalks.Label(name, lon_lat, {
                            'textSymbol': {
                                'textFaceName': 'monospace',
                                'textFill': '#34495e',
                                'textHaloFill': '#fff',
                                'textHaloRadius': 4,
                                'textSize': 12,
                                'textWeight': 'bold',
                                'textVerticalAlignment': 'top'
                            }
                        }).addTo(this.polygonLayer);
                    },
                    onCheckChange: function(selecteds) {
                        this.isCircular = false;
                        this.isPolygon = false;
                        this.polygonLayer.clear();
                        var points = [];
                        var me = this;
                        var isBMap = me.mapType == 'bMap';
                        selecteds.forEach(function(element) {
                            if (!element.children) {
                                switch (element.type) {
                                    case 1:
                                        if (isBMap) {
                                            var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                        } else {
                                            var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                        }

                                        var point = {
                                            x: lon_lat[0],
                                            y: lon_lat[1]
                                        }
                                        points.push(point);
                                        new maptalks.Circle(point, element.radius1, {
                                            symbol: symbol
                                        }).addTo(me.polygonLayer);
                                        me.addFenceLabel(element.name, lon_lat);
                                        break;
                                    case 2:
                                        var lon_lat_s = [];
                                        if (isBMap) {
                                            var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                            lon_lat_s = wgs84sToBdPoints(JSON.parse(element.points2));
                                        } else {
                                            var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                            lon_lat_s = wgs84sToGooglePoints(JSON.parse(element.points2));
                                        }
                                        points = points.concat(lon_lat_s);
                                        new maptalks.Polygon(lon_lat_s, {
                                            symbol: symbol
                                        }).addTo(me.polygonLayer);
                                        me.addFenceLabel(element.name, lon_lat);
                                        break;
                                    case 6:
                                        var lon_lat_s = [];
                                        if (isBMap) {
                                            var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                        } else {
                                            var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                        }
                                        points.push({
                                            x: lon_lat[0],
                                            y: lon_lat[1]
                                        });
                                        me.addPointToMap(element.name, lon_lat);
                                        break;
                                }

                            }
                        });
                        this.setViewPortCenter(points);
                    },
                    cancelSelected: function() {
                        this.polygonLayer.clear();
                        this.originalData.forEach(function(item) {
                            item.checked = false;
                            item.children.forEach(function(record) {
                                record.checked = false;
                            });
                        });
                        this.treeData.forEach(function(item) {
                            item.checked = false;
                            item.children.forEach(function(record) {
                                record.checked = false;
                            });
                        });
                    },
                    handleSaveCircular: function() {
                        var me = this;
                        var url = myUrls.addcuStomMarkerRecord();
                        var data = {
                            categoryid: this.classId,
                            type: 1,
                            lat1: points1List[1],
                            lon1: points1List[0],
                            radius1: Number(parseInt(this.radius)),
                            name: this.geoName
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status === 0) {
                                me.originalData.forEach(function(item) {
                                    if (data.categoryid === item.categoryid) {
                                        resp.record.title = resp.record.name;
                                        resp.record.categoryid = data.categoryid;
                                        resp.record.render = treeChilrenRender;
                                        resp.record.checked = true;
                                        item.children.push(resp.record);
                                    }
                                })
                                if (me.originalData !== me.treeData) {
                                    me.treeData.forEach(function(item) {
                                        if (data.categoryid === item.categoryid) {

                                            resp.record.title = resp.record.name;
                                            resp.record.categoryid = data.categoryid;
                                            resp.record.render = treeChilrenRender;
                                            resp.record.checked = true;
                                            item.children.push(resp.record);
                                        }
                                    })
                                }
                                if (utils.getMapType() == 'bMap') {
                                    var lon_lat = wgs84tobd09(resp.record.lon1, resp.record.lat1);
                                } else {
                                    var lon_lat = wgs84togcj02(resp.record.lon1, resp.record.lat1);
                                }
                                me.addFenceLabel(data.name, lon_lat);
                                me.$Message.success(isZh ? "添加成功" : "Added successfully");
                                me.addPolygonModal = false;
                            } else {
                                me.$Message.error(isZh ? "添加失败" : "Add failed");
                            }
                        });
                    },
                    queryCustomMarkerRecords: function() {
                        var url = myUrls.queryCustomMarkerRecords(),
                            me = this;
                        utils.sendAjax(url, {}, function(resp) {
                            if (resp.status == 0) {
                                if (resp.categorys) {
                                    me.filterOriginalData(resp.categorys);
                                }
                            }
                        })
                    }
                },
                computed: {
                    selectTypeList: function() {
                        var typeList = [];
                        this.originalData.forEach(function(item) {
                            typeList.push({
                                label: item.title,
                                value: item.categoryid
                            });
                        });
                        return typeList;
                    }
                },
                watch: {
                    searchValue: function(newValue) {
                        this.searchChange(this, newValue);
                    },
                    searchDeviceVal: function(newVal) {
                        if (newVal === '') {
                            this.treeDeviceList[0].open = true;
                            this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, this.treeDeviceList);
                        } else {
                            var limitcount = 0;
                            var data = this.variableDeepSearch(this.treeDeviceList, newVal, limitcount);
                            if (data.length == 0) {
                                data.push({
                                    name: isZh ? '无数据' : 'No data',
                                    nocheck: true
                                })
                            }
                            this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, data);

                        }
                    },
                    addPolygonModal: function(val) {
                        if (!val) {
                            // this.polygonLayer.clear();
                            this.isCircular = false;
                            this.isPolygon = false;
                        }
                    },
                    mapType: function(newVal, oldVal) {
                        var geometries = this.polygonLayer.getGeometries();
                        geometries.forEach(function(geometrie) {
                            var points = geometrie.getCoordinates();
                            if (points instanceof Array) {
                                var newPoints = [];
                                points.forEach(function(items) {
                                    var newItems = [];
                                    if (items.forEach) {
                                        items.forEach(function(point) {
                                            var newPoint = null;
                                            if (newVal == 'bMap') {
                                                var lon_lat = gcj02tobd09(point.x, point.y);
                                                newPoint = {
                                                    x: lon_lat[0],
                                                    y: lon_lat[1]
                                                };
                                            } else if (newVal == 'gMap') {
                                                if (oldVal == 'aMap' || oldVal == "gMap" || oldVal == "gChinaMap") {
                                                    newPoint = point;
                                                } else {
                                                    var lon_lat = bd09togcj02(point.x, point.y);
                                                    var newPoint = {
                                                        x: lon_lat[0],
                                                        y: lon_lat[1]
                                                    };
                                                }


                                            }

                                            newItems.push(newPoint);
                                        })
                                        newPoints.push(newItems);
                                    } else {
                                        var newPoint = null;
                                        if (newVal == 'bMap') {
                                            var lon_lat = gcj02tobd09(items.x, items.y);
                                            newPoint = {
                                                x: lon_lat[0],
                                                y: lon_lat[1]
                                            };
                                        } else if (newVal == 'gMap') {


                                            if (oldVal == 'aMap' || oldVal == "gMap" || oldVal == "gChinaMap") {
                                                newPoint = items;
                                            } else {
                                                var lon_lat = bd09togcj02(items.x, items.y);
                                                newPoint = {
                                                    x: lon_lat[0],
                                                    y: lon_lat[1]
                                                };
                                            }
                                        }
                                        newPoints.push(newPoint);
                                    }
                                });
                                geometrie.setCoordinates(newPoints);
                            } else {
                                var newPoint = null;
                                if (newVal == 'bMap') {
                                    var lon_lat = gcj02tobd09(points.x, points.y);
                                    newPoint = {
                                        x: lon_lat[0],
                                        y: lon_lat[1]
                                    };
                                } else if (newVal == 'gMap') {
                                    if (oldVal == 'aMap' || oldVal == "gMap" || oldVal == "gChinaMap") {
                                        newPoint = points;
                                    } else {
                                        var lon_lat = bd09togcj02(points.x, points.y);
                                        newPoint = {
                                            x: lon_lat[0],
                                            y: lon_lat[1]
                                        };
                                    }
                                }

                                geometrie.setCoordinates(newPoint);
                            }
                        })
                    }
                },
                mounted: function() {
                    this.initMap();
                    this.queryCustomMarkerRecords();
                }
            });
        })();
    </script>
</body>

</html>